<template>
    <div class="container">
        <div class="handle-box flex" style="align-items:center">
                <el-form ref="form" :model="form" label-width="120px" class="flex" style="margin-bottom:-15px">
                    <el-form-item label="单位名称：">
                        <el-input v-model="name" placeholder="请输入名称" class="handle-input mr10" @input="mohu()"></el-input>
                    </el-form-item>
                    <el-form-item class="flex" style="flex-direction: column;align-items: center;">
                        <el-button type="primary" icon="el-icon-search" >搜索</el-button>
                        <el-button type="success" icon="el-icon-plus" @click="add()">新增</el-button>
                      
                    </el-form-item>
                </el-form>
                   
                             <el-upload
                            action="/上传文件的接口"
                            :on-change="onChange"
                            :auto-upload="false"
                            :show-file-list="false"
                            accept=".xls, .xlsx"  class="upload">
                        <el-button type="warning" icon="el-icon-folder-add" style="width:97px;height:33px">导入列表</el-button>
                        </el-upload>
                   
            </div>
            <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            >
                <el-table-column type="index" :index="indexMethod" label="ID"></el-table-column>
                <el-table-column prop="CLIENT_NAME" label="单位名称"></el-table-column>
                <!-- <el-table-column prop="REGION_NAME" label="所属区域"></el-table-column> -->
                <el-table-column prop="OWNER" label="隶属单位名称"></el-table-column>
                <el-table-column prop="LEADER" label="负责人"></el-table-column>
                <el-table-column prop="TELEPHONE" label="负责人联系方式" width="150"></el-table-column>
                <el-table-column prop="LONGITUDE" label="经度"></el-table-column>
                <el-table-column prop="LATITUDE" label="纬度"></el-table-column>
                <el-table-column prop="LOCATION" label="地址"></el-table-column>
                <!-- <el-table-column prop="PHOTO" label="图片"></el-table-column> -->
                <el-table-column prop="REMARK" label="备注"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            @click="handleDelete(scope.$index, scope.row)"
                            style="color:red"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"  
                    :page-size="pageSize"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <!-- 编辑弹出框 -->
            <el-dialog v-dialogDrag title="编辑单位" :visible.sync="editVisible" width="50%">
                <el-form ref="editform" :model="editform" label-width="180px" class="display">
                     <el-form-item label="单位名称：" class="wid50">
                        <el-input v-model="editform.CLIENT_NAME" ></el-input>
                    </el-form-item>
                    <el-form-item label="隶属单位名称：" class="wid50">
                        <el-input v-model="editform.OWNER" ></el-input>
                    </el-form-item>
                     <el-form-item label="所属地区："  class="wid50">
                       <el-select v-model="addform.PARENT_ID" placeholder="请选择" @change="changevalue" autocomplete="off">
                          <el-option v-for="item in options" :key='item.REGION_ID' :label="item.REGION_NAME" :value="item.REGION_ID" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属街道："  class="wid50">
                       <el-select v-model="addform.STREET_ID" placeholder="请选择" autocomplete="off">
                          <el-option v-for="item in optionsstreet" :key='item.STREET_ID' :label="item.STREET_NAME" :value="item.STREET_ID">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="负责人：" class="wid50">
                        <el-input v-model="editform.LEADER" ></el-input>
                    </el-form-item>
                    <el-form-item label="负责人联系方式：" class="wid50">
                        <el-input v-model="editform.TELEPHONE" ></el-input>
                    </el-form-item>
                    <el-form-item label="经度：" class="wid50"> 
                        <el-input v-model="editform.LONGITUDE" ></el-input>
                    </el-form-item>
                    <el-form-item label="纬度：" class="wid50">
                        <el-input v-model="editform.LATITUDE" ></el-input>
                    </el-form-item>
                    <el-form-item label="地址：" class="wid50">
                        <el-input v-model="editform.LOCATION" ></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" class="wid50">
                        <el-input v-model="editform.REMARK" ></el-input>
                    </el-form-item>
                     <div class="wid100" style="height:2px;background:#ccc;margin-bottom:15px"></div>
                <el-form-item style="width:100%;border:1px solid #ccc;border-radius:5px;box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);">
                    <el-button type="success" style="float:right;margin:5px" @click="addtable">新增一行</el-button>
                    <el-table
                      :data="tableDatas.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                      style="width: 100%">
                      <el-table-column
                        prop="BOX_NAME"
                        label="垃圾桶名称"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="BOX_TYPE"
                        label="垃圾桶类型"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="SIZE"
                        label="垃圾桶重量">
                      </el-table-column>
                      <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            >编辑</el-button>
                            <el-button
                                type="text"
                                @click="handleDelete(scope.$index, scope.row)" style="color:red"
                            >删除</el-button>
                        </template>
                </el-table-column>
                    </el-table>
                    <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"  
                    :page-size="pageSize"
                    :total="tableDatas.length"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
                </el-form-item>
                    
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 新增弹框 -->
            <el-dialog v-dialogDrag title="新增单位" :visible.sync="addVisible" width="50%">
                <el-form ref="addform" :model="addform" label-width="180px" class="display">
                     <el-form-item label="所属地区：" :label-width="labelswidth" class="wid50">
                       <el-select v-model="addform.PARENT_ID" placeholder="请选择" @change="changevalue" autocomplete="off">
                          <el-option v-for="item in options" :key='item.REGION_ID' :label="item.REGION_NAME" :value="item.REGION_ID" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属街道：" :label-width="labelswidth" class="wid50">
                       <el-select v-model="addform.STREET_ID" placeholder="请选择" autocomplete="off">
                          <el-option v-for="item in optionsstreet" :key='item.STREET_ID' :label="item.STREET_NAME" :value="item.STREET_ID">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单位名称：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="addform.CLIENT_NAME" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="隶属单位名称：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="addform.OWNER" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="addform.LEADER" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人联系方式：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="addform.TELEPHONE" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="经度：" :label-width="labelswidth" class="wid50"> 
                        <el-input v-model="addform.LONGITUDE" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="addform.LATITUDE" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="addform.LOCATION" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="labelswidth" class="wid50">
                        <el-input v-model="addform.REMARK" autocomplete="off"></el-input>
                    </el-form-item>
                    <div class="wid100" style="height:2px;background:#ccc;margin-bottom:15px"></div>
                <el-form-item style="width:100%;border:1px solid #ccc;border-radius:5px;box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);">
                    <el-button type="success" style="float:right;margin:5px;" @click="addtable">新增一行</el-button>
                    <el-table
                      :data="tableDatas.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                      style="width: 100%;">
                      <el-table-column
                        prop="BOX_NAME"
                        label="垃圾桶名称"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="BOX_TYPE"
                        label="垃圾桶类型"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="SIZE"
                        label="垃圾桶重量">
                      </el-table-column>
                      <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            >编辑</el-button>
                            <el-button
                                type="text"
                                @click="handleDelete(scope.$index, scope.row)" style="color:red"
                            >删除</el-button>
                        </template>
                </el-table-column>
                    </el-table>
                    <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"  
                    :page-size="pageSize"
                    :total="tableDatas.length"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
                </el-form-item>
                    
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addsaveEdit(addform)">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 新增表格弹出框 -->
            <el-dialog v-dialogDrag title="新增" :visible.sync="addtabledialog" width="50%">
                <el-form ref="addtableform" :model="addtableform" label-width="100px" class="display">
                    <el-form-item label="垃圾桶名称" class="wid50">
                        <el-input v-model="addtableform.BOX_NAME" :label-width="labelwidth" ></el-input>
                    </el-form-item>
                    <el-form-item label="垃圾桶类型" :label-width="labelwidth" class="wid50">
                        <el-select v-model="addtableform.BOX_TYPE" placeholder="请选择">
                          <el-option v-for="item in typeoptions" :key='item.TYPE_ID' :label="item.TYPE_NAME" :value="item.TYPE_NAME" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="垃圾桶重量" class="wid50">
                        <el-input v-model="addtableform.SIZE" :label-width="labelwidth" ></el-input>
                    </el-form-item>
                    <el-form-item label="垃圾桶照片" class="wid50">
                        <el-upload
                            ref="upload"
                            class="upload-demo"
                            action='http://111.160.78.62:5575/UpLoadImageFiles?src=01900/居民'
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            :auto-upload="false"
                            :file-list="addfileList"
                            :before-upload="handleBeforeUpload"
                            list-type="picture"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                        <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addtabledialog = false">取 消</el-button>
                    <el-button type="primary" @click="addtablesuccess(addtableform)" >确 定</el-button>
                </span>
            </el-dialog>
        </div>
</template>
<script>
import '../../assets/css/common.css'

export default {
    data(){
        return{
            currentPage:1, //初始页
            pagesize:10,    //    每页的数据
            userList: [],
            address:'',
            name:'',
            wid200: '200px',
            addVisible: false,
            editform: [],
            addform: [],
            options:[],
            optionsstreet:[],
            tableData: [],
            addtableform: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            tableDatas:[],
            pageTotal: 0,
            form: {
                name: ''
            },
            labelswidth: '160px',
            labelwidth: '120px',
            idx: -1,
            id: -1,
            imgBroadcastList:[], // 储存旬中的图片列表
            imgsStr: '', // 后端需要的多张图base64字符串，分割
            dialogImageUrl: '',
            diaLogForm: {},
            addtabledialog:false,
            typeoptions:[]
        }
    },
    created() {
        this.getdata();
        this.getselect();
        this.gettypedata()
    },
    methods: {
        indexMethod(index) {
          return index + 1;
        },
        // 图片上传
    // 图片选择后 保存在 diaLogForm.imgBroadcastList 对象中
   imgBroadcastChange (file, fileList) {
    //    this.createMiniQrcode(URL.createObjectURL(file.raw)
    const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB
    if (!isLt2M) {
     this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
     this.$message.error('图片选择失败，每张图片大小不能超过 2MB,请重新选择!')
    } else {
        var reader = new FileReader();
    //   reader.readAsDataURL(file);
    //   console.log(reader.readAsDataURL(URL.createObjectURL(file.raw)))
        this.imgsStr = URL.createObjectURL(file.raw)
        // console.log(this.imgsStr)
     this.diaLogForm.imgBroadcastList.push(file)
    //  console.log(this.diaLogForm.imgBroadcastList.push(file))
    //  this.submitDialogData()
    }
   },
        // 有图片移除后 触发
        imgBroadcastRemove (file, fileList) {
         this.diaLogForm.imgBroadcastList = fileList
        },
        // 获取行政区下拉列表
        async getselect(){
            const { data } = await this.$axios.get(this.$url+'/GetRegionListApi')
            this.options = data.filter(item => {
              return item
              console.log(item)
            })
        },
        async changevalue(e){
            const { data } =await this.$axios.get(this.$url+'/sreetListsApi?id='+e);
            console.log(data)
            this.optionsstreet = data.filter(item => {
                return item 
            })

        },
             // ----------以下为导入Excel数据功能--------------
   // 文件选择回调
   onChange(file, fileList) {
    //  console.log(fileList);
     this.fileData = file; // 保存当前选择文件
     this.readExcel(); // 调用读取数据的方法
   },
   // 读取数据
   readExcel(e) {
     let that = this;
     const files = that.fileData;
    //  console.log(files);
     if (!files) {
       //如果没有文件
       return false;
     } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
       this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
       return false;
     }
     const fileReader = new FileReader();
    //  console.log(fileReader)
     fileReader.onload = ev => {
       try {
         const data = ev.target.result;
        //  console.log(ev.target)
        //  console.log(this);
         const workbook = this.XLSX.read(data, {
           type: "binary"
         });
        //  if (workbook.SheetNames.length >= 1) {
        //    this.$message({
        //      message: "导入数据表格成功",
        //      showClose: true,
        //      type: "success"
        //    });
        //  }
         const wsname = workbook.SheetNames[0]; //取第一张表
         const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
        //  this.$axios({
        //   //  this.$url + '/ImportRubbishBoxApi'
        //    url:this.$url+ '/ImportClientHotelApi' ,
        //    method:'post',
        //    data: ws
        //  }).then(res=>{
        //      console.log(res.data)
        //    if(res.data.IsSucess){
        //        this.$message.success('导入成功')
        //        this.getdata()
        //    }
        //  })
        //  console.log(ws)
        //  that.outputs = []; //清空接收数据
        //  for (var i = 0; i < ws.length; i++) {
        //     // console.log(ws[i]['NAME'])
        //    var sheetData = {
        //      // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
        //     //  ID: ws[i]["ID"],
        //      NAHOTEL_IDME: ws[i]["HOTEL_ID"],
        //      CLIENT_NAME: ws[i]["CLIENT_NAME"],
        //      OWNER: ws[i]["OWNER"],
        //      LEADER: ws[i]["LEADER"],
        //      TELEPHONE: ws[i]["TELEPHONE"],
        //      LONGITUDE: ws[i]["LONGITUDE"],
        //     //  WEIGHT_YH: ws[i]['重量'],
        //      LATITUDE: ws[i]["LATITUDE"],
        //      REMARK: ws[i]['REMARK'],
        //    };
        // //    console.log(sheetData)
        // //    that.tableData.unshift(sheetData);
        // //    console.log(that.tableData)
        //  }
         let exceldata =  [] 
         ws.filter(item=>{
             var sheetData = {
              CLIENT_NAME: item["单位名称"],
              OWNER: item["隶属单位名称"],
              STREET_NAME: item["所属区域"],
              LEADER: item['负责人'],
              TELEPHONE: item['负责人联系方式'],
              LONGITUDE: item["经度"],
              LATITUDE: item["纬度"],
              LOCATION: item["地址"],
              REMARK: item["备注"],
           }
             console.log(sheetData);
             exceldata.push(sheetData)
         })
         console.log(exceldata)
        this.$axios({
          url: this.$url + '/ImportClientHotelApi',
          method: 'post',
          data: exceldata
        }).then(res=>{
            console.log(res)
          if(res.data.IsSucess){
            this.$message.success('导入成功')
            this.getdata()
          }
        })
         this.$refs.upload.value = "";
       } catch (e) {
         return false;
       }
     };
     // 如果为原生 input 则应是 files[0]
     fileReader.readAsBinaryString(files.raw);
   },
        // 获取表格数据
        addtablesuccess(addtableform){
            this.$message.success('新增成功');
            this.tableDatas.push({
                BOX_NAME: addtableform.BOX_NAME,
                BOX_TYPE: addtableform.BOX_TYPE,
                SIZE: addtableform.SIZE
            })
            this.addform.boxs = Object.assign(this.tableDatas)
            // console.log(this.tableDatas)
            this.addtabledialog = false
        },
        // 获取垃圾类型
        async gettypedata(){
            const {data} = await this.$axios.get(this.$url+'/GetRubbishTypeApi');
            this.typeoptions = data.filter(item=>{
                // console.log(item)
                return item
            })
        },
        // 新增表格一行
        addtable(){
            this.addtabledialog = true;
        },
        // 获取数据
        getdata(){
            var TYPE;
            this.$axios({
            //    url: this.$url+'/GetAllRubbishBoxApi?STREET_ID='+localStorage.getItem('STREET_NO')+'&TYPE' ,
               url: this.$url+'/GetClientHotelListApi?STREET_ID='+localStorage.getItem("STREET_NO")+'&TYPE' ,
               method: 'get',
            }).then(res=>{
              console.log(res.data)
              this.tableData =Object.assign([],res.data)
            })
            // this.$axios({
            //     url: this.$url+'/GetClientHotelListApi',
            //     method: 'get'
            // }).then(res=>{
            //     console.log()
            //     this.tableData=Object.assign([],res.data)
            // })
        },
        // 新增
        add(){
            this.addVisible = true;
        },
        // 保存新增
        addsaveEdit(addform){
            console.log(addform)
            console.log({
                    CLIENT_NAME: this.addform.CLIENT_NAME,
                    CLIENT_NO: this.addform.STREET_ID,
                    OWNER: this.addform.OWNER,
                    LEADER: this.addform.LEADER,
                    TELEPHONE: this.addform.TELEPHONE,
                    LONGITUDE: this.addform.LONGITUDE,
                    LATITUDE: this.addform.LATITUDE,
                    LOCATION: this.addform.LOCATION,
                    PHOTO: this.imgsStr,
                    REMARK: this.addform.REMARK
                })
            this.$axios({
                url: this.$url+'/AddRubbishBoxApi',
                method: 'post',
                data:{
                    CLIENT_NAME: this.addform.CLIENT_NAME,
                    CLIENT_NO: this.addform.STREET_ID,
                    OWNER: this.addform.OWNER,
                    LEADER: this.addform.LEADER,
                    TELEPHONE: this.addform.TELEPHONE,
                    LONGITUDE: this.addform.LONGITUDE,
                    LATITUDE: this.addform.LATITUDE,
                    LOCATION: this.addform.LOCATION,
                    PHOTO: this.imgsStr,
                    REMARK: this.addform.REMARK
                }
            }).then(res=>{
               if(res.data.IsSucess){
                   this.addVisible =false
                   this.$message.success('新增成功')
                   this.getdata()
               }
            })
        },
        // 模糊查询
        mohu() {
            // var search = this.name;
            // console.log(search)
            // var newdate = [];
            // if(search){
            //     if(search)
            //      this.tableData.filter(item=>{
            //         if(item.name.indexOf(search) != -1){
            //             newdate.push(item)
            //         }
            //     })
            // }else if (search == ''){
            //     console.log(this.tableData)
            // }
            // this.tableData = newdate
        },
        handleDelete(index,row){
            console.log(row)
           
            this.$confirm('确认删除？','提示',{
                type: 'warning'
            }).then(()=>{
                 this.$axios({
                url: this.$url+'/DeleteClientHotelApi',
                method: 'post',
                data:{
                    HOTEL_ID: row.HOTEL_ID
                }
                }).then(res=>{
                    if(res.data.IsSucess){
                        this.$message.success('删除成功');
                        this.getdata()
                    }
                    
                })
            }).catch(()=>{

            })
   
        },
         // 编辑操作
        handleEdit(index, row) {
            this.$axios({
                url: this.$url +'/GetRubbishImageApi',
                method: 'get',
                params:{
                    ID: row.ID
                }
            }).then(res=>{
                console.log(res)
            })
            this.editform = Object.assign({}, row); 
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
            let studenteList=this.editform;
            console.log(studenteList);
            this.$axios({
                url: this.$url+ '/UpdateClientHotelApi',
                method: 'post',
                data:{
                    HOTEL_ID: studenteList.HOTEL_ID,
                    CLIENT_NAME: studenteList.CLIENT_NAME,
                    CLIENT_NO: studenteList.STREET_ID,
                    OWNER: studenteList.OWNER,
                    LEADER: studenteList.LEADER,
                    TELEPHONE: studenteList.TELEPHONE,
                    LONGITUDE: studenteList.LONGITUDE,
                    LATITUDE: studenteList.LATITUDE,
                    LOCATION: studenteList.LOCATION,
                    PHOTO: this.imgsStr,
                    REMARK: studenteList.REMARK
                }
            }).then(res=>{
                if(res.data.IsSucess){
                    this.$message.success('编辑成功')
                    this.editVisible = false;
                    this.getdata()
                }
            })
            // this.editVisible = false;
            // this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            // this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(currentPage) {
            this.currentPage = currentPage;
            // this.$set(this.query, 'pageIndex', val);
            // this.getData();
        },
        handleSizeChange(size){
            this.pagesize = size;
        }
    }
}
</script>
<style scoped>
    .el-select{
        width: 100%;
    }
    /deep/.el-upload__input{
        display: none!important;
    }
    .wid100{
        width: 100%;
    }
    /deep/.el-upload__input{
        display: none;
    }
    /deep/.el-form-item__content{
        
    }
</style>